<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>登录 - 助农购物网站</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="${pageContext.request.contextPath}/logo/favicon.ico">
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
    <style>
        html, body {
            height: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
        .login-container {
            height: 100vh;
            max-height: 100vh;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            padding: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .banner-section {
            padding: 0;
            position: relative;
            height: 100vh;
            overflow: hidden;
        }
        .banner-section .carousel {
            height: 100vh;
            position: relative;
        }
        .banner-section .carousel-inner {
            height: 100vh;
        }
        .banner-section .carousel-item {
            height: 100vh;
        }
        .banner-section .carousel-item img {
            object-fit: cover;
            height: 100vh;
            width: 100%;
            display: block;
        }
        .form-section {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px 60px;
            height: 100vh;
            max-height: 100vh;
            overflow-y: auto;
            overflow-x: hidden;
        }
        .form-section::-webkit-scrollbar {
            width: 6px;
        }
        .form-section::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }
        .form-section::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 10px;
        }
        .form-section::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
        .login-card {
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.15);
            border: none;
            max-width: 420px;
            width: 100%;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            margin: auto;
        }
        .login-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 25px 70px rgba(0,0,0,0.2);
        }
        .login-card .card-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            padding: 24px;
        }
        .login-card .card-header h3 {
            font-size: 24px;
            font-weight: 600;
            letter-spacing: 0.5px;
        }
        .login-card .card-body {
            padding: 32px;
        }
        .user-type-group {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            padding: 8px 0;
        }
        .user-type-radio {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            padding: 8px 16px;
            border-radius: 8px;
            transition: all 0.2s;
            border: 2px solid transparent;
        }
        .user-type-radio:hover {
            background-color: #f0f4ff;
            border-color: #667eea;
        }
        .user-type-radio input[type="radio"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: #667eea;
        }
        .user-type-radio label {
            margin: 0;
            cursor: pointer;
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .user-type-radio input[type="radio"]:checked + label {
            color: #667eea;
            font-weight: 600;
        }
        .form-control {
            border-radius: 8px;
            border: 1px solid #e0e0e0;
            padding: 10px 16px;
            transition: all 0.3s;
        }
        .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.15);
        }
        .btn-primary {
            border-radius: 8px;
            padding: 12px;
            font-weight: 600;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            transition: all 0.3s;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
        }
        .carousel-caption {
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            padding: 30px;
            border-radius: 12px;
        }
        .carousel-caption h3 {
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 12px;
        }
        .carousel-caption p {
            font-size: 18px;
            margin: 0;
        }
        @media (max-width: 991px) {
            .form-section {
                padding: 40px 20px;
            }
            html, body {
                overflow: auto;
            }
            .login-container {
                overflow: auto;
            }
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="container-fluid g-0 h-100">
            <div class="row g-0 h-100">
                <!-- 左侧轮播图 -->
                <div class="col-lg-7 col-xl-8 d-none d-lg-block banner-section">
                    <div id="bannerCarousel" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-indicators" id="carouselIndicators"></div>
                        <div class="carousel-inner" id="carouselInner">
                            <!-- Banner内容将通过JavaScript动态加载 -->
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#bannerCarousel" data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#bannerCarousel" data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                        </button>
                    </div>
                </div>
                
                <!-- 右侧登录表单 -->
                <div class="col-lg-5 col-xl-4 form-section">
                    <div class="card login-card">
                        <div class="card-header text-white text-center">
                            <h3 class="mb-0">用户登录</h3>
                        </div>
                        <div class="card-body">
                            <c:if test="${error != null}">
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    ${error}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            </c:if>
                            
                            <c:if test="${success != null}">
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    ${success}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            </c:if>
                            
                            <form action="${pageContext.request.contextPath}/login" method="post" id="loginForm">
                                <!-- 用户类型选择 -->
                                <div class="mb-4">
                                    <label class="form-label fw-bold mb-3">选择登录类型</label>
                                    <div class="user-type-group">
                                        <div class="user-type-radio">
                                            <input type="radio" name="userType" value="0" id="type0" checked>
                                            <label for="type0">客户端用户</label>
                                        </div>
                                        <div class="user-type-radio">
                                            <input type="radio" name="userType" value="1" id="type1">
                                            <label for="type1">商户</label>
                                        </div>
                                        <div class="user-type-radio">
                                            <input type="radio" name="userType" value="2" id="type2">
                                            <label for="type2">管理员</label>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="username" class="form-label">用户名</label>
                                    <input type="text" class="form-control" id="username" name="username" 
                                           placeholder="请输入用户名" value="merchant" required autofocus>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="password" class="form-label">密码</label>
                                    <input type="password" class="form-control" id="password" name="password" 
                                           placeholder="请输入密码" value="123456" required>
                                </div>
                                
                                <div class="d-grid mb-3">
                                    <button type="submit" class="btn btn-primary btn-lg">登录</button>
                                </div>
                                
                                <div class="text-center">
                                    <p class="mb-0">还没有账号？ 
                                        <a href="${pageContext.request.contextPath}/register.jsp">立即注册</a>
                                    </p>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="${pageContext.request.contextPath}/js/bootstrap.bundle.min.js"></script>
    <script>
        // 加载Banner轮播图
        function loadBanners() {
            console.log('开始加载Banner...');
            fetch('${pageContext.request.contextPath}/banner/list')
                .then(response => {
                    console.log('响应状态:', response.status);
                    return response.json();
                })
                .then(data => {
                    console.log('Banner数据:', data);
                    if (data.success && data.data && data.data.length > 0) {
                        console.log('找到', data.data.length, '个Banner');
                        const carouselInner = document.getElementById('carouselInner');
                        const carouselIndicators = document.getElementById('carouselIndicators');
                        
                        if (!carouselInner || !carouselIndicators) {
                            console.error('找不到轮播图容器元素');
                            return;
                        }
                        
                        let html = '';
                        let indicatorsHtml = '';
                        
                        function escapeHtml(text) {
                            if (!text) return '';
                            const div = document.createElement('div');
                            div.textContent = text;
                            return div.innerHTML;
                        }
                        
                        data.data.forEach(function(banner, index) {
                            console.log('处理Banner', index, ':', banner);
                            const isActive = index === 0 ? 'active' : '';
                            const isFirst = index === 0;
                            const slideNum = index + 1;
                            
                            indicatorsHtml += '<button type="button" data-bs-target="#bannerCarousel" data-bs-slide-to="' + index + '" ' +
                                'class="' + isActive + '" aria-current="' + (isFirst ? 'true' : 'false') + '" aria-label="Slide ' + slideNum + '"></button>';
                            
                            let itemHtml = '<div class="carousel-item ' + isActive + '">' +
                                '<img src="' + banner.imageUrl + '" class="d-block w-100" alt="' + (banner.title || 'Banner') + '" ' +
                                'onerror="console.error(\'图片加载失败:\', this.src);">';
                            
                            if (banner.title || banner.description) {
                                itemHtml += '<div class="carousel-caption d-none d-md-block">';
                                if (banner.title) {
                                    itemHtml += '<h3>' + escapeHtml(banner.title) + '</h3>';
                                }
                                if (banner.description) {
                                    itemHtml += '<p>' + escapeHtml(banner.description) + '</p>';
                                }
                                itemHtml += '</div>';
                            }
                            
                            itemHtml += '</div>';
                            html += itemHtml;
                        });
                        
                        carouselIndicators.innerHTML = indicatorsHtml;
                        carouselInner.innerHTML = html;
                        console.log('Banner HTML已设置');
                    } else {
                        console.warn('没有Banner数据或数据为空');
                        // 如果没有Banner数据，显示默认图片
                        const carouselInner = document.getElementById('carouselInner');
                        if (carouselInner) {
                            carouselInner.innerHTML = '<div class="carousel-item active">' +
                                '<div class="d-flex align-items-center justify-content-center h-100" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh;">' +
                                '<div class="text-center text-white">' +
                                '<h2>助农购物网站</h2>' +
                                '<p class="lead">优质农产品，新鲜直达</p>' +
                                '</div></div></div>';
                        }
                    }
                })
                .catch(error => {
                    console.error('加载Banner失败:', error);
                    // 显示默认内容
                    const carouselInner = document.getElementById('carouselInner');
                    if (carouselInner) {
                        carouselInner.innerHTML = '<div class="carousel-item active">' +
                            '<div class="d-flex align-items-center justify-content-center h-100" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh;">' +
                            '<div class="text-center text-white">' +
                            '<h2>助农购物网站</h2>' +
                            '<p class="lead">优质农产品，新鲜直达</p>' +
                            '</div></div></div>';
                    }
                });
        }
        
        // 页面加载完成后加载Banner
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', loadBanners);
        } else {
            loadBanners();
        }
    </script>
</body>
</html>

